/* webkit-box 布局*/
.ui-grid{
  display: -webkit-box;
}
.ui-grid-middle{
  display: -webkit-box;
  -webkit-box-align: center;
}
.ui-grid-vertical{
  display: -webkit-box;
  /* ! autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.col-0{
  -webkit-box-flex: 0;
}
.col-1{
  -webkit-box-flex: 1;
}
.col-2{
  -webkit-box-flex: 2;
}
.col-3{
  -webkit-box-flex: 3;
}
.col-4{
  -webkit-box-flex: 4;
}
.col-5{
  -webkit-box-flex: 5;
}
.col-6{
  -webkit-box-flex: 6;
}

/* flex 布局*/
.flex-box{
  display: flex;
}
.flex-box-column{
  display: flex;
  flex-direction: column;
}
.flex-box-wrap{
  display: flex;
  flex-wrap: wrap;
}
/*水平右对齐*/
.flex-box-justify-end{
  display: flex;
  justify-content: end;
}
//居中对齐
.flex-box-justify-center{
  display: flex;
  justify-content: center;
}
//两端对齐,子元素间均分剩余空间
.flex-box-justify-space-between{
  display: flex;
  justify-content: space-between;
}
//子元素两边的空间一样
.flex-box-justify-space-around{
  display: flex;
  justify-content: space-around;
}
//两边和子元素之间空白均分
.flex-box-justify-space-evenly{
  display: flex;
  justify-content: space-evenly;
}
.flex-box-center{
  display: flex;
  align-items: center;
}
/* flex 子元素样式 */
.flex-item-grow-1{
  flex-grow: 1; //元素占有剩余空白的所有空间
}